<template>
  <el-card>
    <div class="date-box">
      <div class="left">
        <div class="mr10">{{ date }}({{ lunarDate }})</div>
        <div>{{ week }}</div>
      </div>
      <div>{{ time }}</div>
    </div>
    <div class="userinfo-box">
      <div class="mb10">黄xx/<span class="color-gray">2030xxxx</span></div>
      <div class="color-gray mb10">朔黄铁路/<span class="color-gray">财务部</span></div>
      <div class="mb10">xxx岗位/<span>xxxx岗位</span></div>
    </div>
  </el-card>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'
import { Lunar, Solar } from 'lunar-typescript'

const date = ref(null)
const week = ref('')
const lunarDate = ref('')
const time = ref('')
let timer

const updateTime = () => {
  const now = dayjs()
  date.value = now.format('MM-DD')
  week.value = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.day()]
  time.value = now.format('HH:mm:ss')

  const solar = Solar.fromDate(new Date())
  const lunar = solar.getLunar()
  lunarDate.value = `${lunar.getMonthInChinese()}月${lunar.getDayInChinese()}`
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style scoped lang="scss">
/* 可以在这里添加样式 */
.date-box {
  font-size: 14px;
  display: flex;
  height: 30px;
  justify-content: space-between;
  .left {
    width: calc(100% - 80px);
    display: flex;
  }
  div {
    color: rgb(36, 145, 229);
  }
}

.userinfo-box {
  height: 80px;
  font-size: 14px;
}

.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}

.mb10 {
  margin-bottom: 10px;
}

.color-gray {
  color: gray;
}
</style>
